<template>
    <div class="about-us-container">
        <div class="image-container">
            <img src="../../assets/images/about.jpg" alt="" class="image">
        </div>
        <div class="content">
            <div class="title">About Our stage</div>
            <div class="text" style="text-indent: 2em;">流浪动物救助及领养平台致力于为无家可归的动物提供一个温暖的庇护所和新生的机会。我们的使命是通过救助、医疗、和收容等方式，帮助那些被遗弃或遭受虐待的动物，确保它们能够获得应有的关爱与照顾。我们与志愿者、社区和动物医院紧密合作，以提供必要的兽医护理和心理疏导，帮助它们重新融入社会。</div>
            <div class="text" style="text-indent: 2em;">此外，我们鼓励公众参与领养活动，让更多动物找到温暖的家庭。平台上有详细的动物资料和领养流程指导，让每位有爱心的人都能轻松找到适合自己的伴侣。通过教育和宣传，我们希望提高社会对流浪动物问题的认识，倡导负责任的宠物领养和绝育措施。加入我们，一起为流浪动物创造更美好的未来，让每一只生命都得到尊重与爱护。</div>
            <div class="text" style="text-indent: 2em;">我们是一个纯属个人组织,无商业行为,仅仅因爱而救助,仅管范围很小,能力有限,但我们还是非常愿意去做这件事情,我们希望用我们的实际行动去影响周围的人,唤起他们的爱心,不要视而不见,更不要虐待,爱护这些幼小的动物,善待生命.如果您有什么意见或者建议，请发送至邮箱szadoptpet@hotmail.com,帮助我们做的更好。</div>
            
            <div class="text">我们的工作时间: </div>
            <div class="text">每周一到周日上午9:00--12:00</div>
            <div class="text">中午休息下午2:00--6:00下班</div>
        </div>
    </div>
</template>

<script setup lang="ts">
// 保持原有内容不变
</script>

<style scoped lang="scss">
.about-us-container{
    width: 1200px;
    max-width: 1200px; 
    height: 700px;
    margin-top: 50px;
    border: 1px solid #e7e7e7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    
    // 添加以下内容实现左右布局
    display: flex;
    gap: 20px;
}

.image-container{
    // border: 1px solid black;
    flex: 1; // 占一半宽度
}

.image{
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}

.content{
    flex: 1; 
    // border: 1px solid black;
}
.text{
    margin-bottom: 13px;
    font-size: 18px;
    color: #515151;
}
.title{
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 20px;
}
</style>